<template>
  <ElTable class="list-table is-border" height="720" :="$attrs" border :data="props.data" :span-method="spanMethod" style="width: 100%">
    <ElTableColumn label="登记时间" prop="customerComplaintRegistrationEntity.djsj" align="center" width="140">
      <template #default="{ row }">
        <div class="line-item">
          <div class="flex gap-2">
            <div class>
              <el-tag v-if="isOverdueJqsj(row.customerComplaintRegistrationEntity?.djsj, row.jqsj)" type="warning"
                      class="custom-tag-width">接起
              </el-tag>
            </div>
            <div>
              <el-tag v-if="isOverduePdsj(row.customerComplaintRegistrationEntity?.djsj, row.pdsj)" type="danger"
                      class="custom-tag-width">判定
              </el-tag>
            </div>
          </div>
          <div class="bottom-section top-section">
            {{ row.customerComplaintRegistrationEntity?.djsj }}
          </div>
        </div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="投诉客户对接群名" prop="customerComplaintRegistrationEntity.tskhdjqm" align="center"
                   width="120">
      <template #default="{ row }">
        <div class="ellipsis-cell">{{ row.customerComplaintRegistrationEntity?.tskhdjqm }}</div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="投诉问题发生时间" prop="customerComplaintRegistrationEntity.tswtfssj" align="center"
                   width="180"></ElTableColumn>
    <ElTableColumn label="关键词" prop="customerComplaintRegistrationEntity.gjc" align="center" width="180">
      <template #default="{ row }">
        <div class="ellipsis-cell">{{ row.customerComplaintRegistrationEntity?.gjc }}</div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="问题描述" prop="customerComplaintRegistrationEntity.wtms" align="center" width="220">
      <template #default="{ row }">
        <div class="ellipsis-cell">{{ row.customerComplaintRegistrationEntity?.wtms }}</div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="投诉客户名称" prop="tskhmc" align="center" width="120"></ElTableColumn>
    <ElTableColumn label="投诉客户店铺" prop="tskhdp" align="center" width="120"></ElTableColumn>
    <ElTableColumn label="投诉客户子账号" prop="tskhzzh" align="center" width="140"></ElTableColumn>
    <ElTableColumn label="投诉处理内容" prop="tsclnr" align="center" width="150">
      <template #default="{ row }">
        <div class="ellipsis-cell">{{ row.tsclnr }}</div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="投诉结果判定" prop="tsjgpdName" align="center" width="120"></ElTableColumn>
    <ElTableColumn label="违规问题分类判定" prop="wgwtfbyName" align="center" width="90"></ElTableColumn>
    <ElTableColumn label="违规分类明细判定" prop="wgwtfbeName" align="center" width="90"></ElTableColumn>
    <ElTableColumn label="投诉处理状态" prop="tsclztName" align="center" width="90"></ElTableColumn>
    <ElTableColumn label="责任区域" prop="zrrqyName" align="center" width="100"></ElTableColumn>
    <ElTableColumn label="责任人" prop="zrr" align="center" width="70"></ElTableColumn>
    <ElTableColumn label="处理方式" prop="clfsName" align="center" width="90"></ElTableColumn>
    <ElTableColumn label="完结状态" prop="wjztName" align="center" width="90"></ElTableColumn>
    <ElTableColumn prop="_action" label="操作" fixed="right" :min-width="250" header-align="center" align="center">
      <template #default="{ row }">
        <div :class="{ 'highlight-row': isOver48Hours(row) }">
          <ElButton type="primary" link @click="$emit('edit-complaint', row)">处理</ElButton>
          <ElButton type="primary" link @click="$emit('add-complaintDetail', row)">拆分</ElButton>
          <ElButton v-if="row.complaintDetailId" type="primary" link @click="openFj(row)">附件</ElButton>
          <ElButton v-if="row.complaintDetailId && row.tsjgpdName" type="primary" link @click="openPc(row)">赔偿</ElButton>
        </div>
      </template>
    </ElTableColumn>
  </ElTable>
  <FileDialog :fjObj="fjObj"/>
</template>

<script setup lang="ts">
import {ElTableColumn} from 'element-plus';
import {watch, ref, reactive, defineProps, withDefaults} from 'vue'
import FileDialog from '@/views/menus/n-ykf-file/components/FileDialog.vue'
import dayjs from "dayjs";

interface Props {
  data: any[]
  hiddenColumns?: Record<string, any>
}

//合并定义+默认值
const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  hiddenColumns: () => ({}),
})

// 判断是否超过 48 小时的方法
const isOver48Hours =  (row: any): boolean => {
  if (!row.customerComplaintRegistrationEntity.djsj) return false

  const rowDjsj = dayjs(row.customerComplaintRegistrationEntity.djsj);
  const rowJqsj = dayjs(row.jqsj);
  console.log("1111111111")
  console.log(rowDjsj)
  console.log(rowJqsj)
  const diffHours = rowJqsj.diff(rowDjsj, 'hour');
  console.log(diffHours)
  return diffHours > 48
}

// 定义 list，并初始化为空数组
const list = ref<any[]>([])

// 当 props.data 更新时，同步更新 list
watch(() => props.data, (newData) => {
      list.value = newData
    },
    {immediate: true, deep: true}
)
//表单合并
const mergedIndices = new Set(); // 记录已被合并的行索引
// 提前计算合并索引
const calculateMergedIndices = (data) => {
  mergedIndices.clear();
  let i = 0;
  while (i < data.length) {
    const currentVal = data[i].customerComplaintRegistrationEntity?.djsj;
    for (let j = i + 1; j < data.length; j++) {
      const nextVal = data[j].customerComplaintRegistrationEntity?.djsj;
      if (currentVal === nextVal) {
        mergedIndices.add(j);
      } else {
        break;
      }
    }
    i++;
  }
};
// 监听数据变化并重新计算合并索引
watch(() => props.data, (newData) => {
  calculateMergedIndices(newData);
}, {immediate: true, deep: true});
const spanMethod = ({row, rowIndex, columnIndex}) => {
  // 只对第一列（登记时间）进行处理
  if (columnIndex >= 0 && columnIndex < 5) {
    // 如果当前行已经被合并过，直接隐藏
    if (mergedIndices.has(rowIndex)) {
      return {rowspan: 0, colspan: 0};
    }
    let count = 0;
    const currentVal = row.customerComplaintRegistrationEntity?.djsj;

    for (let i = rowIndex + 1; i < list.value.length; i++) {
      const nextVal = list.value[i].customerComplaintRegistrationEntity?.djsj;
      if (currentVal === nextVal) {
        count++;
        mergedIndices.add(i);
      } else {
        break;
      }
    }
    if (count > 0) {
      return {rowspan: count + 1, colspan: 1};
    } else {
      return {rowspan: 1, colspan: 1};
    }
  }
  // 其他列不合并
  return {rowspan: 1, colspan: 1};
}

//附件上传
const fjObj = reactive({
  isShow: false,
  gjjlId: '',
  mklx: ''
});

// 打开附件页面
const openFj = async (row) => {
  // 传过去mklx以及glId
  fjObj.isShow = true;
  fjObj.gjjlId = row.complaintDetailId;
  fjObj.mklx = 'tsjymx';
}

const isOverduePdsj = (djsj: string | null, pdsj: string | null): number => {
  // 如果属于红色组，直接返回 red
  if (isPartOfRedGroup1({customerComplaintRegistrationEntity: {djsj}})) {
    return 1;
  }
  // 否则根据当前行判断是否应为红色
  if (isRedStatus1(djsj, pdsj)) {
    return 1;
  }
};
const isOverdueJqsj = (djsj: string | null, jqsj: string | null): number => {
  // 如果属于黄色组，直接返回 yellow
  if (isPartOfRedGroup2({customerComplaintRegistrationEntity: {djsj}})) {
    return 1;
  }
  // 否则根据当前行判断是否应为红色
  if (isRedStatus2(djsj, jqsj)) {
    return 1;
  }
};

// 判断某行是否属于一个包含 status-red 的组
const isPartOfRedGroup1 = (row: any): boolean => {
  const currentDjsj = row.customerComplaintRegistrationEntity?.djsj;
  // 遍历所有数据，查找是否有相同 djsj 的行满足红色条件
  for (let i = 0; i < list.value.length; i++) {
    const currentRow = list.value[i];
    const djsj = currentRow.customerComplaintRegistrationEntity?.djsj;
    const pdsj = currentRow.pdsj;
    if (djsj === currentDjsj && isRedStatus1(djsj, pdsj)) {
      return true;
    }
  }
  return false;
};
// 判断某行是否属于一个包含 status-yellow 的组
const isPartOfRedGroup2 = (row: any): boolean => {
  const currentDjsj = row.customerComplaintRegistrationEntity?.djsj;
  // 遍历所有数据，查找是否有相同 djsj 的行满足黄色条件
  for (let i = 0; i < list.value.length; i++) {
    const currentRow = list.value[i];
    const djsj = currentRow.customerComplaintRegistrationEntity?.djsj;
    const jqsj = currentRow.jqsj;
    if (djsj === currentDjsj && isRedStatus2(djsj, jqsj)) {
      return true;
    }
  }
  return false;
};

const isRedStatus1 = (djsj: string | null, pdsj: string | null): boolean => {
  const djsjDate = new Date(djsj);
  const pdsjDate = pdsj ? new Date(pdsj) : null;
  const now = new Date();
  const diffHours1 = (now.getTime() - djsjDate.getTime()) / (1000 * 60 * 60);
  const diffHours2 = pdsjDate ? (pdsjDate.getTime() - djsjDate.getTime()) / (1000 * 60 * 60) : 0;
  return (diffHours1 > 24 && !pdsj) || diffHours2 > 24;
};
const isRedStatus2 = (djsj: string | null, jqsj: string | null): boolean => {
  const djsjDate = new Date(djsj);
  const jqsjDate = jqsj ? new Date(jqsj) : null;
  const now = new Date();
  const diffHours1 = (now.getTime() - djsjDate.getTime()) / (1000 * 60 * 60);
  const diffHours2 = jqsjDate ? (jqsjDate.getTime() - djsjDate.getTime()) / (1000 * 60 * 60) : 0;
  return (diffHours1 > 12 && !jqsj) || diffHours2 > 12;
};

</script>

<style scoped lang="scss">
.ellipsis-cell {
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 隐藏超出部分 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  max-width: 200px;
  /* 设置一个最大宽度，根据需要调整 */
}

.line-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between; // 上下贴边对齐
  height: 100%;
  padding: 4px 0;
  font-size: 12px;
}

.top-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.bottom-section {
  font-size: 14px; // 调整为你需要的字体大小
  text-align: center;
}

.custom-tag-width {
  width: 60px;
}

.highlight-row {
  background-color: #fddfe0;
}
</style>